<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		</style>
	</head>
	<body>
		<div id="d">
			<div v-text="'hello1'"></div>
			<div v-html="'<h1>hello2</h1>'"></div>
			<div v-text="msg"></div>
			<div v-html="msg2" v-show='isShow'></div>
			<div v-if='isIf>80'>a</div>
			<div v-else-if='isIf>70'>b</div>
			<div v-else='isIf>60'>c</div>
			
			<div id='app'>
				<ul>
					<li v-for='(item,index) in newsList' :key="index">
						{{item.title}}{{item.timer}}
					</li>
				</ul>
				<button v-on:click.once='click'>点击</button>
				<button @click='click2'>点击2</button>
				<br>
				<!-- 只有src可以直接="变量" 而其他的都是="{x:x}" 如果两个名字一样就可以省略一个 -->
				<img v-bind:src="imgSrc" :style="{border}">
				<button @click='img'>下一张</button>
			</div>
		</div>
		<script src="../jquery-3.6.0.min.js"></script>
		<script src='../vue.js'></script>
		<script>
			// let d=document.getElementById('d');
			// d.innerHTML='Hello Vue!';
			
			console.dir($);
			console.log(Vue);
			
			new Vue({
				el:'#d',
				// data:{msg:'hello3'}
				//Vue里面所有变量都是放在data里面
				data (){
					return {
						msg:'hello3',
						msg2:'<h2>hello4</h2>',
						isShow:'1',  //null 0 false undefine  //{} [] 都是true
						isIf:71,
						newsList:[
							{title:'新闻1',timer:'2021-5-20'},
							{title:'新闻2',timer:'2021-5-21'}
						],
						imgSrc:'../google.png',
						border:'1px solid black',
					}
				},
				methods:{
					click(){
						console.log('点击了');
					},
					click2:function(){
						console.log('1');
					},
					img(){
						this.imgSrc='../i.jpg';
					},
				}
			})
		</script>
	</body>
</html>
